<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .nav {
      width: 1200px;
      display: flex;
      line-height: 100px;
      justify-content: space-around;
      margin: 0 auto;
    }

    .nav li {
      width: 150px;
      line-height: 100px;
      text-align: center;
      background: skyblue;
      cursor: pointer;
    }

    .nav .active {
      background: red;
      color: white;
    }

    #con {
      width: 1200px;
      margin: 0 auto;
    }

    #con>div {
      width: 100%;
      display: none;
    }

    #con>div:nth-child(1) {
      display: block;
    }

    table {
      width: 1200px;
      margin: 0 auto;
    }

    td {
      text-align: center;
    }

    .list .title {
      width: 900px;
      height: 150px;
      background: black;
      color: white;
      font-family: "华文琥珀";
      font-size: 35px;
      text-align: center;
      line-height: 150px;
      margin: 0 auto;
    }

    .list_nav {
      width: 1200px;
      display: flex;
      justify-content: space-around;
    }

    .list {
      width: 280px;
      margin-top: 20px;
      font-size: 25px;
    }

    .list_info {
      width: 1200px;
      margin: 10px auto;
      display: flex;
      justify-content: space-around;
    }

    .list_info>div {
      width: 280px;
      border: 4px solid black;
      text-align: center;
      border-radius: 10px;

    }

    .list_info>div>p {
      margin-top: 6px;
      position: relative;
    }

    .list_info>div>p:after {
      content: "";
      display: block;
      width: 20px;
      height: 2px;
      background: black;
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: -10px;
    }
  </style>
</head>

<body>
  <div>
    <ul class="nav">
      <li class="active">首页</li>
      <li>添加部分</li>
      <li>表格显示</li>
      <li>分类显示</li>
    </ul>
    <div id="con">
      <div>首页部分</div>
      <!-- 添加部分 -->
      <div>
        <h1>添加部分</h1>
        垃圾名称：<input type="text" id="lename">
        <br>
        <select id="sel">
          <option value="1">可回收</option>
          <option value="2">厨余垃圾</option>
          <option value="3">其他垃圾</option>
          <option value="4">有害垃圾</option>
        </select>
        <button id="addBtn">添加</button>
        <button id="sureUpdate">确认修改</button>
      </div>
      <!-- 表格显示 -->
      <div>
        <h1>表格显示部分</h1>
        <input type="text" id="mytxt">
        <button id="searchBtn">搜索</button>
        <button id="open">开启隔行变色</button>
        <button id="close">关闭隔行变色</button>

        筛选： <select name="" id="Searchsel">

          <option value="">全部</option>
          <option value="1">可回收</option>
          <option value="2">厨余垃圾</option>
          <option value="3">其他垃圾</option>
          <option value="4">有害垃圾</option>
        </select>
        <table border="1">
          <thead>
            <tr>
              <th>id</th>
              <th>名称</th>
              <th>分类</th>
              <th>添加时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="mybody">
            <!-- <tr>
              <td>11</td>
              <td>垃圾名</td>
              <td>分类显示</td>
              <td>时间</td>
              <td>
                <button>编辑</button>
                <button>删除</button>
              </td>
            </tr> -->
          </tbody>
        </table>
      </div>
      <!-- 列表部分 -->
      <div class="list">
        <div class="title">生活垃圾分类</div>
        <ul class="list_nav">
          <!-- <li>可回收物</li>
          <li>厨余垃圾</li>
          <li>其他垃圾</li>
          <li>有害垃圾</li> -->
        </ul>
        <div class="list_info">
          <div>
            <p>小棒骨</p>
          </div>
          <div>
            <p>小棒骨</p>
          </div>
          <div>
            <p>小棒骨</p>
          </div>
          <div>
            <p>小棒骨</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./javascripts/jquery-3.4.1.min.js"></script>
  <script>
    $(".nav li").click(function () {
      $(this).addClass("active").siblings().removeClass("active");
      var index = $(this).index();
      $("#con div").eq(index).show().siblings().hide();
    })
    //添加操作
    $("#addBtn").click(function () {
      $.ajax({
        url: "http://127.0.0.1:3000/users/add",
        type: "post",
        data: {
          lename: $("#lename").val(),
          sel: $("#sel").val()
        },
        success: function (res) {
          console.log(res)
          alert("添加成功")
          // 清空输入框
          $("#lename").val("")
          $("#sel").val("1")
          loadTable();
          loadList()
        }
      })
    })
    //加载表格
    function loadTable(lename, sel) {
      $.ajax({
        url: "http://127.0.0.1:3000/users/getlist",
        type: "post",
        data: {
          lename: lename,
          sel: sel
        },
        success: function (res) {
          var str = "";
          $.each(res, function (index, ele) {
            var selname = ""
            if (ele.sel == "1") {
              selname = "可回收"
            } else if (ele.sel == "2") {
              selname = "厨余垃圾"
            } else if (ele.sel == "3") {
              selname = "其他垃圾"
            } else if (ele.sel == "4") {
              selname = "有害垃圾"
            }
            str += ` <tr _id="${ele._id}">
              <td>${ele.id}</td>
              <td>${ele.lename}</td>
              <td>${selname}</td>
              <td>${ele.date}</td>
              <td>
                <button onclick="update('${ele._id}','${ele.lename}','${ele.sel}')">编辑</button>
                <button onclick="del('${ele._id}')">删除</button>
              </td>
            </tr>`
          })
          $("#mybody").html(str)
        }
      })
    }
    loadTable();
    // 删除操作
    function del(_id) {
      $.ajax({
        url: "http://127.0.0.1:3000/users/del",
        type: "post",
        data: {
          _id: _id
        },
        success: function () {
          loadTable()
          loadList()
        }
      })
    }
    // 编辑操作
    var editId = null;
    function update(_id, lename, sel) {
      editId = _id;//存储修改修改需要的_id
      $("#lename").val(lename)
      $("#sel").val(sel)
      $(".nav li").eq(1).addClass("active").siblings().removeClass("active");
      $("#con div").eq(1).show().siblings().hide()
    }
    // 确认修改
    $("#sureUpdate").click(function () {
      $.ajax({
        url: "http://127.0.0.1:3000/users/update",
        type: "post",
        data: {
          _id: editId,
          lename: $("#lename").val(),
          sel: $("#sel").val()
        },
        success: function () {
          alert("修改成功")
          loadTable();
          loadList()
          $("#lename").val("")
          $("#sel").val("1")
          $(".nav li").eq(2).addClass("active").siblings().removeClass("active");
          $("#con div").eq(2).show().siblings().hide()
        }
      })
    })
    //筛选分类数据加载
    function loadList() {
      $.ajax({
        url: "http://127.0.0.1:3000/users/getlist",
        type: "post",
        success: function (res) {
          var obj = {

          }

          $.each(res, function (index, ele) {

            if (obj[ele.sel]) {
              obj[ele.sel].push(ele)
            } else {
              obj[ele.sel] = [];
              obj[ele.sel].push(ele)
            }
          })

          console.log(obj)
          var str = '';
          $(".list_nav").html("")
          for (var x in obj) {
            if (x == "1") {
              $(".list_nav").append("<li>可回收垃圾</li>")
            } else if (x == "2") {
              $(".list_nav").append("<li>厨余垃圾</li>")
            } else if (x == "3") {
              $(".list_nav").append("<li>其他垃圾</li>")
            } else if (x == "4") {
              $(".list_nav").append("<li>有害垃圾</li>")
            }
            var pstr = ''
            $.each(obj[x], function (index, ele) {
              pstr += ` <p>${ele.lename}</p>`
            })
            str += ` <div>
                  ${pstr}
                </div>`
          }
          $(".list_info").html(str)
        }
      })
    }
    loadList()
    // 搜素
    $("#searchBtn").click(function () {
      loadTable($("#mytxt").val())
    })
    // 下拉筛选
    $("#Searchsel").change(function () {
      var val = $(this).val();
      loadTable("", val)
    })
    // 开启隔行变色
    $("#open").click(function () {
      $("#mybody").on("mouseover", "tr", function () {
        if ($(this).index() % 2 == 0) {
          $(this).css({ background: "red" })
        } else {
          $(this).css({ background: "blue" })
        }
      })
      $("#mybody").on("mouseout", "tr", function () {
        if ($(this).index() % 2 == 0) {
          $(this).css({ background: "" })
        } else {
          $(this).css({ background: "" })
        }
      })
    })
    //关闭隔行变色
    $("#close").click(function () {
      // 解绑事件
      $("#mybody").off("mouseover", "tr")
      $("#mybody").off("mouseout", "tr")
    })
  </script>
</body>

</html>